import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';
import ImagePicker from 'react-native-image-picker';

export default class extends Component {
    //初始值
    state = {
        avatar: require('../../../images/logo.png')
    };

    upload = () => {
        let options = {
            title: '上传头像',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '手机相册',
            storageOptions: {
                skipBackup: true,
                path: 'images'
            }
        };
        const {uploadAvatar} = this.props;
        ImagePicker.showImagePicker(options, (response) => {
            // console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                uploadAvatar(response.uri);
            }
        });
    };

    render() {
        const {avatar} = this.state;
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.upload}>
                    <Image source={avatar} style={styles.img}/>
                    <Text>点击修改头像</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 9,
        paddingTop: 40,
        paddingBottom: 40,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderColor: '#f0f0f0'
    },
    img: {
        width: 80,
        height: 80,
        marginBottom: 8,
        borderRadius: 40
    }
});
